<template>
  <div class="allNow">
    <ul>
      <li
        v-for="item in list"
        :key="item.filmId"
        @click="goDetail(item.filmId)"
        class="item"
      >
        <div class="imges1"><img :src="item.poster" /></div>
        <div class="info">
          <span
            ><i class="bigName">{{ item.name }}</i
            >&nbsp;&nbsp;<i class="smallName">{{ item.item.name }}</i></span
          >
          <span>主演：{{ item.actors | actorFilter }}</span>
          <span>上映日期：周五&nbsp;10月15日</span>
        </div>
        <div class="buy">预购</div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import {bus,EVENT_SCRLL_END} from '@/helper/bus_helper.js';
Vue.filter(
  "actorFilter",
  data=>data.map(actor=>actor.name).join(" ")  
)
import { doGet } from "@/helper/ajax_helper.js";
import { actorFilter } from "@/helper/filter_helper.js";
export default {
  data() {
    return {
      list: [],
       total:1,
      pageNum:0,
      isLoading:false
    };
  },
  methods:{
    goDetail(filmId) {
      this.$router.push(`/Detail/${filmId}`);
  },
  loadData(){
    if(this.list.length >= this.total || this.isLoading){
        return ;
      }else{
        this.isLoading =true;
         this.pageNum++;

         doGet(
      `/gateway?cityId=440100&pageNum=${this.pageNum++}&pageSize=10&type=2&k=1275955`,
      "mall.film-ticket.film.list",
      (res) => (this.list = res.data.films)
    );
      }
  }
  }
  ,
 actorFilter:{
   actorFilter
 }
 ,
 beforeMount(){
    bus.$on(EVENT_SCRLL_END,()=>{
      console.log('commingsoon 开始加载数据...');
      this.loadData()
    })
  }
,
  mounted() {
    this.loadData()
  }
}
</script>

<style lang="scss" >
.item {
  width: 100%;
  height: 94px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .imges1 {
    width: 70px;
    height: 90%;
    display: flex;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    width: 155px;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    span {
      width: 100%;
      height: 20px;
      line-height: 20px;
      display: block;
      //  省略号
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      text-align: left;
      color: #797d82;
      font-size: 13px;
      i {
        font-style: normal;
      }
      .bigName {
        font-size: 14px;
        color: black;
      }
      .smallName {
        width: 13px;
        height: 9px;
        background-color: #d2d6dc;
        font-size: 9px;
        font-weight: bold;
        color: #fff;
      }
      //
      .peoplGrade {
        color: #ffb232;
      }
    }
  }
  .buy {
    width: 50px;
    height: 25px;
    border: 1px solid #ff5f16;
    color: #ff5f16;
    border-radius: 3px;
    line-height: 25px;
  }
}
</style>